<template>
  <div class="main-page">
    <div class="page-title">
      <span>房屋安全管理监测分析</span>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="8">
          <div class="module-left">
            <el-row :gutter="30">
              <el-col :span="12">
                <div class="alarms-installed-number">
                  <div class="public-title"><span>老旧危房报警器安装数量</span></div>
                  <alarm-number :number-data="alarmsInstalledNumber"></alarm-number>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="alarm-quantity">
                  <div class="public-title"><span>老旧危房报警数量</span></div>
                  <alarm-number :number-data="alarmQuantity"></alarm-number>
                </div>
              </el-col>
              <div class="left-map">
                <div>
                  <el-image :src="moduleTitleLogo" fit="fill"></el-image>
                  <span>在册危险房屋数量</span>
                </div>
                <div class="left-map-legend">在册危房统计</div>
                <map-box v-if="mapList?.length" :listData="mapList"></map-box>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="table-list-module">
            <table-list :tableData="tableListData" :tablePaginationInfo="tableInfo"
                        :columnData="tableColumnData" @changePageNum="changeTablePage"></table-list>
          </div>
          <div class="alarm-cause-analysis">
            <div class="public-title"></div>
            <div class="alarm-cause-analysis-content">
              <div class="alarm-cause-analysis-item" v-for="(item, index) of alarmCauseAnalysisList" :key="item.id">
                <pie
                    v-if="alarmCauseAnalysisList?.length"
                    :pie-data="item"
                    :pieColor="alarmCauseAnalysisColorList[index]"
                    class="h223"
                    @click="fullSc('pie', item, { pieColor: alarmCauseAnalysisColorList[index] })"
                ></pie>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="installation-alarm-analysis">
            <div class="public-title"/>
            <div class="installation-alarm-analysis-content">
              <double-line
                  v-if="installationAlarmAnalysisData?.xAxisData?.length"
                  ref="installationAlarmAnalysisRef"
                  :line-data="installationAlarmAnalysisData"
                  class="h250"
                  @click="fullSc('doubleLine', installationAlarmAnalysisData)"
              ></double-line>
            </div>
          </div>
          <div class="documented-dangerous-houses-distribution">
            <div class="public-title"/>
            <div class="documented-dangerous-houses-distribution-content">
              <bar
                v-if="documentedDangerousHousesDistributionData?.xAxisData?.length"
                ref="documentedDangerousHousesDistributionRef"
                :bar-data="documentedDangerousHousesDistributionData"
                class="h250"
                @click="fullSc('bar', documentedDangerousHousesDistributionData)"
              ></bar>
            </div>
          </div>
          <div class="alarm-processing-statistics">
            <div class="public-title"/>
            <div class="alarm-processing-statistics-content">
              <double-line
                  v-if="alarmProcessingStatisticsData?.xAxisData?.length"
                  ref="alarmProcessingStatisticsRef"
                  :line-data="alarmProcessingStatisticsData"
                  class="h250"
                  @click="fullSc('doubleLine', alarmProcessingStatisticsData)"
              ></double-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{fontSizeTimes: 2}"
        v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import pie from "@/components/housingSafetyManagementMonitoringAnalysis/pie.vue";
import doubleLine from "@/components/housingSafetyManagementMonitoringAnalysis/doubleLine.vue";
import bar from "@/components/housingSafetyManagementMonitoringAnalysis/bar.vue";

export default {
  components: {
    pie,
    doubleLine,
    bar,
  }
}
</script>

<script setup>
import {onMounted, ref} from 'vue'

import alarmNumber from "@/components/housingSafetyManagementMonitoringAnalysis/alarmNumber.vue";
import mapBox from "@/components/housingSafetyManagementMonitoringAnalysis/map.vue";
import tableList from "@/components/housingSafetyManagementMonitoringAnalysis/tableList.vue";

import {
  getHousingSafetyOldBuildingAlarm, // 老旧危房报警器安装数量/报警数量
  getHousingSafetyDangerousBuildings, // 在册危险房屋分布
  getHousingSafetyDeviceList, // 设备情况列表-table
  getHousingSafetyAlarmReasonAnalysis, // 报警原因分析-pie
  getHousingSafetyGenerateAlarmChart, // 安装报警分析图-line
  getHousingSafetyAlarmCount, // 报警数量统计-line
} from "@/api/housingSafetyManagementMonitoringAnalysis/index";

import moduleTitleLogo from "@/assets/img/housingSafetyManagementMonitoringAnalysis/module-title-logo.png";
import alarmCauseAnalysisTitleBg from "@/assets/img/housingSafetyManagementMonitoringAnalysis/alarm-cause-analysis-title-bg.png";

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})
const dialogRef = ref(null) // chart图放大-domref

const cityObj = ref({
  name: '',
  code: '210000'
}) // 地图-城市code信息

const mapList = ref([])

const alarmsInstalledNumber = ref({ // 老旧危房报警器安装数量
  today: [],
  total: [],
  todayYoy: '',
  totalYoy: '',
  label: '安装',
  unit: '套',
  bgColor1: '#1B57A4',
  bgColor2: '#032557',
  bgColor3: '#032557',
  borderColor: '#8ADAFF',
})

const alarmQuantity = ref({ // 老旧危房报警数量
  today: [],
  total: [],
  todayYoy: '',
  totalYoy: '',
  label: '报警',
  unit: '次',
  bgColor1: '#1B86A4',
  bgColor2: '#033757',
  bgColor3: '#034257',
  borderColor: '#03EAFE',
})

const tableListData = ref([]) // 列表tablelist
const tableColumnData = ref([]) // 列表columnlist
const tableInfo = ref({ // 列表-分页-table信息
  total: 0,
  currentPage: 1
})

const alarmCauseAnalysisColorList = ref(['#2481E5', '#24CBE5', '#E59824', '#E55151']) // 报警原因分析-colors
const alarmCauseAnalysisList = ref([]) // 报警原因分析

const installationAlarmAnalysisData = ref({ // 安装报警分析-data
  legendData: [
    {
      name: '安装',
      itemStyle: {
        color: '#2481E5'
      }
    },
    {
      name: '报警',
      itemStyle: {
        color: '#E55151'
      }
    }
  ],
  xAxisData: [],
  seriesData: [],
  yAxisName: '套/次',
  isCustomXAxisLabel: true,
  linearGradientColor: [['rgba(36,129,229,0.4)', 'rgba(216,216,216,0)'], ['rgba(229,81,81,0.4)', 'rgba(229,81,81,0)']],
  yAxisDefaultMaxValue: 300
})
const installationAlarmAnalysisRef = ref(null) // 安装报警分析-domref

const documentedDangerousHousesDistributionData = ref({ // 在册危险房屋分布-data
  xAxisData: [],
  seriesData: []
})
const documentedDangerousHousesDistributionRef = ref(null) // 在册危险房屋分布-domref

const alarmProcessingStatisticsData = ref({ // 报警处理统计-data
  legendData: [
    {
      name: '上年度',
      itemStyle: {
        color: '#03EAFE'
      }
    },
    {
      name: '今年',
      itemStyle: {
        color: '#E4871D'
      }
    }
  ],
  xAxisData: [],
  seriesData: [],
  yAxisName: '次',
  linearGradientColor: [['rgba(3,234,254,0.4)', 'rgba(3,234,254,0)'], ['rgba(228,135,29,0.4)', 'rgba(228,135,29,0)']],
  yAxisDefaultMaxValue: 1500
})
const alarmProcessingStatisticsRef = ref(null) // 报警处理统计-domref

const splitAlarmNumber = (num) => { // 格式化报警数number
  let result = num.toString().split('');
  const addZeroNum = 6 - result.length
  for(let i = 0; i < addZeroNum; i++) {
    result.unshift('0')
  }
  return result;
}

const initAlarmNumber = (cityCode) => { // 老旧危房报警器安装数量/报警数量
  getHousingSafetyOldBuildingAlarm({acdoe: cityCode}).then(res => {
    const resData = res?.data
    if (resData) {
      alarmsInstalledNumber.value.today = splitAlarmNumber(resData?.jrazsl)
      alarmsInstalledNumber.value.total = splitAlarmNumber(resData?.ljazsl)
      alarmsInstalledNumber.value.todayYoy = resData?.jrazslHb
      alarmsInstalledNumber.value.totalYoy = resData?.ljazslHb
      alarmQuantity.value.today = splitAlarmNumber(resData?.jrbjsl)
      alarmQuantity.value.total = splitAlarmNumber(resData?.ljbjsl)
      alarmQuantity.value.todayYoy = resData?.jrbjslHb
      alarmQuantity.value.totalYoy = resData?.ljbjslHb
    }
  }).catch(error => {
    console.log(error);
  })
}

const initDocumentedDangerousHousesDistribution = (cityCode) => { // 在册危险房屋分布
  getHousingSafetyDangerousBuildings({acdoe: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      documentedDangerousHousesDistributionData.value.xAxisData = []
      documentedDangerousHousesDistributionData.value.seriesData = []
      mapList.value = resData.map(x => {
        documentedDangerousHousesDistributionData.value.xAxisData.push(x.regionName)
        documentedDangerousHousesDistributionData.value.seriesData.push(x.sum)
        return {
          name: x.regionName,
          value: x.sum
        }
      })
    }
  }).catch(error => {
    console.log(error);
  })
}

const initTableList = (cityCode, pageInfo) => { // table
  getHousingSafetyDeviceList({
    adcode: cityCode,
    pageSize: pageInfo.pageSize,
    pageNum: pageInfo.pageNum,
  }).then(res => {
    const resData = res?.data
    if (resData?.list?.length) {
      tableColumnData.value = [
        {
          label: '序号',
          key: 'index',
          width: 40
        },
        {
          label: '区域',
          key: 'qy'
        },
        {
          label: '建筑物名称',
          key: 'jzwmc'
        },
        {
          label: '基本信息',
          key: 'jbxx'
        },
        {
          label: '检查记录',
          key: 'jcjl'
        },
        {
          label: '维护维修记录',
          key: 'whjl'
        }
      ]
      tableListData.value = resData?.list?.map((x, i) => {
        return {
          ...x,
          index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1)
        }
      })
      tableInfo.value.total = resData?.total
      tableInfo.value.currentPage = pageInfo.pageNum
    } else {
      tableColumnData.value = []
      tableInfo.value.total = resData?.total
      tableInfo.value.currentPage = pageInfo.pageNum
    }
  }).catch(error => {
    console.log(error);
    tableColumnData.value = []
    tableInfo.value.total = 0
    tableInfo.value.currentPage = 1
  })
}

const initAlarmCauseAnalysis = (cityCode, pageInfo) => { // 报警原因分析-pie-getdata
  getHousingSafetyAlarmReasonAnalysis({adcode: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      alarmCauseAnalysisList.value = resData?.map((x, i) => {
        return {
          ...x,
          id: i + 1,
          value: x.sum * x.percent/100,
          remanentValue: x.sum - x.sum * x.percent/100,
        }
      })
    }
  }).catch(error => {
    console.log(error);
  })
}

const initInstallationAlarmAnalysis = (cityCode, pageInfo) => { // 安装报警分析图-line
  getHousingSafetyGenerateAlarmChart({adcode: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      installationAlarmAnalysisData.value.seriesData = []
      installationAlarmAnalysisData.value.xAxisData = resData?.dateList
      installationAlarmAnalysisData.value.seriesData.push(resData?.azList)
      installationAlarmAnalysisData.value.seriesData.push(resData?.bjList)
    }
  }).catch(error => {
    console.log(error);
  })
}

const initAlarmProcessingStatistics = (cityCode, pageInfo) => { // 报警数量统计-line
  getHousingSafetyAlarmCount({adcode: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.monthData?.length) {
      alarmProcessingStatisticsData.value.seriesData = []
      alarmProcessingStatisticsData.value.xAxisData = resData?.monthData
      alarmProcessingStatisticsData.value.seriesData.push(resData?.lastYearData)
      alarmProcessingStatisticsData.value.seriesData.push(resData?.nowYearData)
    }
  }).catch(error => {
    console.log(error);
  })
}

const changeTablePage = (page) => { // 列表-切换
  initTableList(cityObj.value.code, { pageNum: page, pageSize: 10 });
}

const fullSc = (componentName, componentParams, otherParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case 'pie': // 报警原因分析-pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h223 dialog-h223',
        ...otherParams
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'doubleLine': // 安装报警分析图/报警处理统计-line图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h250 dialog-h250',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'bar': // 在册危险房屋分布-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h250 dialog-h250',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const initPage = (cityCode) => {
  initAlarmNumber(cityCode) // 老旧危房报警器安装数量/报警数量
  initDocumentedDangerousHousesDistribution(cityCode) // 在册危险房屋分布
  initTableList(cityCode, {pageNum: 1, pageSize: 10}) // 资金及流向异常情况
  initAlarmCauseAnalysis(cityCode) // 报警原因分析-pie
  initInstallationAlarmAnalysis(cityCode) // 安装报警分析图-line
  initAlarmProcessingStatistics(cityCode) // 报警数量统计-line
}

onMounted(() => {
  initPage(cityObj.value.code)
})
</script>

<style scoped lang="less">
.common-background-clip {
  background: linear-gradient(to bottom, #FFFFFF, #7EBDED);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.common-background-title {
  width: 100%;
  height: 46px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/header-bg.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    span {
      .common-background-clip;
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .module-left {
      margin-top: 8px;
      .alarms-installed-number {
        .public-title {
          background-image: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/alarm-number-module-header-bg1.png");
        }
      }
      .alarm-quantity {
        .public-title {
          background-image: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/alarm-number-module-header-bg2.png");
        }
      }
      .public-title {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 16px;
        height: 26px;
        span {
          position: relative;
          left: 27px;
          top: -5px;
          font-weight: bolder;
          .common-background-clip;
        }
      }
      .left-map {
        display: flex;
        position: relative;
        flex-direction: column;
        top: 30px;
        left: 15px;
        width: 700px;
        min-width: 700px;
        height: 600px;
        overflow: visible;
        > div:first-child {
          display: flex;
          align-items: center;
          .el-image {
            width: 13px;
            height: 14px;
            margin-right: 10px;
          }
          span {
            .common-background-clip;
          }
        }
        &-legend {
          position: absolute;
          top: 50px;
          left: 60px;
          font-size: 14px;
          line-height: 14px;
          display: flex;
          align-items: center;
        }
        &-legend::before {
          content: '';
          display: inline-block;
          width: 10px;
          height: 10px;
          margin-right: 5px;
          background-color: red;
        }
      }
    }

    .table-list-module {
      width: 100%;
      height: 370px;
      /deep/ .table-row {
        height: 38px;
      }
    }

    .before-title {
      display: flex;
      align-items: center;
    }
    .before-title:before {
      content: '';
      display: inline-flex;
      align-items: center;
      width: 5px;
      height: 20px;
      background-color: #00f9fd;
      margin-right: 10px;
    }

    .alarm-cause-analysis {
      padding: 25px 0 0 20%;
      .alarm-cause-analysis-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 520px;
        padding: 20px;
        background: rgba(9,70,145,0.15);
        box-sizing: border-box;
        .alarm-cause-analysis-item {
          width: 50%;
          height: 50%;
        }
      }
      .public-title {
        background: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/alarm-cause-analysis-title-bg.png");
        .common-background-title;
      }
    }

    .installation-alarm-analysis {
      .public-title {
        background: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/installation-alarm-analysis-title-bg.png");
        .common-background-title;
      }
      &-content {
        background: rgba(9,70,145,0.15);
        padding-bottom: 10px;
      }
    }
    .documented-dangerous-houses-distribution {
      .public-title {
        background: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/documented-dangerous-houses-distribution-title-bg.png");
        .common-background-title;
      }
       &-content {
        background: rgba(9,70,145,0.15);
         padding-bottom: 10px;
      }
    }
    .alarm-processing-statistics {
      .public-title {
        background: url("@/assets/img/housingSafetyManagementMonitoringAnalysis/alarm-processing-statistics-title-bg.png");
        .common-background-title;
      }
       &-content {
        background: rgba(9,70,145,0.15);
         padding-bottom: 10px;
      }
    }

    .documented-dangerous-houses-distribution, .alarm-processing-statistics {
      margin-top: 22px;
    }
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>